<template>
	<view class="content index" style="padding: 0;">

		<view style="background-color: #FFFFFF;height: 165px;">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="img" :src="item.image" @click="showSliderInfo(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="noticebar" @click="hanldnotice()">
			<uni-notice-bar :show-icon="true" :scrollable="true" :single="true" :showGetMore="true" :text="notice" :speed="50"/>
		</view>
		<view class="nav">
			<view class="nav-item" @click="hanldShop1(item.id)" v-for="(item,index) in weetType">
				<image class="img" :src="item.ico" style="border-radius: 50%;"></image>
				<view class="text">{{item.name}}</view>
			</view>


		</view>
		<view class="line"></view>
		<view class="activity">
			<view class="activity-wrapper">
				<view style="font-size: 16px;color: #020202;font-weight: bold;">活动精选
				</view>
				<view style="color: #6C6C6C;" @click="hanldActiveShop(0)">查看全部</view>
			</view>
			<view class="activi-item">
				<view class="activi-item-bg" @click="hanldActice(item)" v-for="(item,index) in activity" :key='index'>
					<image :src="item.image" />
					<view class="activi-text">{{item.title}}</view>
					<view class="activ-time">{{item.create_time}}</view>
				</view>

			</view>
		</view>
		<view class="line" style="height: 15px;"></view>
		<view style="background-color: #f5f5f5;width: 100%;height: 233px;">
			<video id="myVideo" :src="video" :controls="controls" class="videoStyle" object-fit='fill' :poster="poster"></video>
		</view>
		<view class="hot-title">
			<view class="left">商家联盟
			</view>
			<view class="right" @click="hanldActiveShop(1)">
				<view>查看更多</view>
			</view>
		</view>
		<!-- <view style="width: 100%;height: 222upx;">
			<image src="../../static/images/lvye.png" style="width: 100%;height: 100%;"></image>
		</view> -->
		<view class="list">
			<view class="list-item" @click="hanldActice(item)" v-for="(item,index) in noticeShop" :key="index">
				<view class="left">
					<image class="img" :src="item.image">
				</view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="short-title">{{item.subtitle}}</view>
					<view class="pirce">
						{{item.start_date}}
					</view>
				</view>
			</view> 
		</view>
		<view class="line" style="height: 10px;"></view>
		<view class="hot-title">
			<view class="left">积分商品
			</view>
			<view class="right" @click="hanldActiveShopjifen()">
				<view>查看更多</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item" @click="hanldShopInfo(item)" v-for="(item,index) in ShopList" :key="index">
				<view class="left">
					<image class="img" :src="item.image">
				</view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="short-title">{{item.subtitle}}</view>
					<view class="pirce" style="font-size: 15px;
font-weight: bold;
color:#FF5F49;">
						{{item.price}}
					</view>
				</view>
			</view>
		</view>

		<!--授权弹框-->
		<view class="search-body">
			<view class="dialog-container" v-if="tokenShow">
				<view class="dialog-mask"></view>
				<view class="dialog-info">
					<view class="dialog-title">您还未授权</view>
					<view class="dialog-content">请先授权再进行操作</view>
					<view class="dialog-footer">
						<button @click="dontLogin()" class="dialog-btn">暂不登录</button>
						<button @getuserinfo="getLogin" open-type="getUserInfo" class="dialog-btn" style="background-color:#FF5F49;color: #fff;">立即授权</button>
					</view>
				</view>
			</view>
		</view>

		<!--首页弹框-->
		<uni-popup ref="popuphy" type="center">
			<view class="huany">
				<view class="huan-text" v-if="userInfo.nickname">Hi~{{userInfo.nickname}}
					<text v-if="userInfo.level===1">业主</text>
					<text v-else>会员</text>
				</view>
				<image :src="bannerList2" class="hy-img"></image>
				<image src="/static/images/guanb.png" class="guanb-img" @click="hanldguan()"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniNoticeBar,
			uniPopup,
		},
		data() {
			return {
				bannerList: [],
				bannerList2: [], //欢迎
				keywords: '',
				notice: '开业啦',
				hotList: '', // 商品列表
				weetType: '', //推文类型
				activity: "", //活动精选
				noticeShop: "", //预告
				video: "",
				token: "",
				tokenShow: "",
				userInfo: "",
				open: '',
				controls:true,
				poster:"",//封面图
				
				//商品
				loadStatus: 'more',
				page: 1,
				ShopList:"",
			}
		},
		onReachBottom () {
			if (this.loadStatus === 'more') {
				this.getShopList()
			}
		},
		onLoad() {
		this.getShopList();
			this.getBanner();
			this.getBanner2()
			this.getNotice();
			this.gettWeetType()
			// this.getHotList();
			this.getActivity()
			this.getVideo();
			this.Six();
			if (!this.open) {
				this.alertSix();
			}
		},
		onShow() {
			this.getNotice();
			this.gettWeetType()
			// this.getHotList();
			this.getActivity()
			this.getVideo();
			this.token = uni.getStorageSync('accessToken');
			this.initData()
		},
		methods: {
			async Six() {
				const data = await wx.login();
				console.log(data);
				wx.setStorageSync("SixTip", data);
			},
			alertSix() {
				console.log("用户是第一次登录");
				this.$refs.popuphy.open();
				this.open = 1;
			},
			//欢迎
			getBanner2() {
				const params = {
					type: 3
				}
				this.$http.get('/index/banner', {
					params: params,
					header: {
						token: ""
					}
				}).then((response) => {
					const res = response.data;
					if (res.code == 0) {
						this.bannerList2 = res.data.list[0].image;
						console.log(this.bannerList2)
					}
				})
			},

			//获取用户信息
			initData() {
				if (uni.getStorageSync('accessToken')) {
					this.$http.get('/user/info').then((response) => {
						const res = response.data;
						if (res.code == 0) {
							this.userInfo = res.data;
							uni.setStorageSync('userInfo', JSON.stringify(res.data));
						}

					})
				}
			},

			//详情
			hanldShop1(id) {
				if (this.token == '') {
					this.tokenShow = true;
				}
				if (this.token) {
					uni.navigateTo({
						url: `/pages/main/articleList/articleList?id=${id}`
					});
				}

			},
			//活动精选详情
			hanldActice(item) {
				if (this.token == '') {
					this.tokenShow = true;
				}
				if (this.token) {
					let aa = item.id
					// let aa = item;
					// let bb = JSON.stringify(aa)
					// let cc = encodeURIComponent(bb);
					uni.navigateTo({
						url: `/pages/find/activityInfo?address=${aa}`
					})
				}

			},
			//关闭首页弹框
			hanldguan() {
				this.$refs.popuphy.close()
			},
			//全部
			hanldAllShop() {
				// uni.navigateTo({
				// 	url:'/pages/Friendsjia/idealHome'
				// })
			},
			//活动全部
			hanldActiveShop(store) {
				console.log(store)
				if(store===1){
					uni.reLaunch({
						url: `/pages/find/find?store=${store}`
					})
				}if(store===0){
					uni.reLaunch({
						url: `/pages/find/find?store=${store}`
					})
				}
			},
			//公告详情
			hanldnotice() {
				uni.navigateTo({
					url: '/pages/main/notice'
				})
			},

			//推文类型
			gettWeetType() {
				this.$http.get('/tweet/type', {
					header: {
						token: ""
					}
				}).then((response) => {
					const res = response.data.data;
					this.weetType = res;
				})
			},

			//活动精选
			getActivity() {
				this.$http.get('/index/activity', {
					header: {
						token: ""
					}
				}).then((response) => {
					const res = response.data;
					console.log(res);
					if (res.code == 0) {
						console.log("acac");
						this.activity = res.data.very;
						this.noticeShop = res.data.notice;
						console.log(this.noticeShop)
					}
				})
			},
			//商品详情
			hanldShopInfo(item){
				if (this.token == '') {
					this.tokenShow = true;
				}
				if (this.token) {
					let aa = item.id;
					// let bb = JSON.stringify(aa)
					// let cc = encodeURIComponent(bb);
					uni.navigateTo({url:`/pages/member/IntegralMall/shopInfo?address=${aa}`})
				}
			
			},
			hanldActiveShopjifen(){
				if (this.token == '') {
					this.tokenShow = true;
				}
				if (this.token) {
					uni.navigateTo({url:`/pages/member/IntegralMall/IntegralMall`})
				}
			},
			getShopList(type) {
				const params = {
					type: this.weetId,
					page: this.page,
					id_sort:this.id_sort,
					subtype:this.subId
				}
				
				this.loadStatus = 'loading'
				this.$http.get('/shop/list', 
					{params: params,
					header: {
						token: ""
					}}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code==0) {
						if (this.page > res.data.last_page) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page ++
						}
						console.log(type)
						if(type){
							this.ShopList = res.data.data
						}else{
							this.ShopList = [...this.ShopList, ...res.data.data];
						}
					} else {
					}
				})
			},
			

			//视频
			getVideo() {
				this.$http.get('/index/config', {
					header: {
						token: ""
					}
				}).then((response) => {
					const res = response.data;
					console.log(res);
					if (res.code == 0) {

						this.video = res.data.video;
						this.poster = res.data.video_img;
						console.log("vvv");
						console.log(this.poster);
					}
				})
			},

			getBanner() {
				const params = {
					type: 1
				}
				this.$http.get('/index/banner', {
					params: params,
					header: {
						token: ""
					}
				}).then((response) => {
					const res = response.data;
					if (res.code == 0) {
						this.bannerList = res.data.list;
						console.log(this.bannerList)
					}
				})
			},
			getNotice() {
				this.$http.get('/index/notice', {
					header: {
						token: ""
					}
				}).then((response) => {
					const res = response.data;
					if (res.code==0) {
						this.notice = res.data.data[0].title;
						console.log(res.data.data)
						console.log("公告列表")
						uni.setStorageSync('noticeList', JSON.stringify(res.data.data));
					}
				})
			},
			getHotList() {
				this.$http.get('/spell/hot').then((response) => {
					const res = response.data;
					console.log(res.data);
					this.hotList = res.data;
					uni.setStorageSync('hotList', JSON.stringify(res.data));
				})
			},
			closePopup() {
				this.$refs.showPopup.close();
			},
			// 商品详情
			toDetails(id) {

				if (this.token == '') {
					this.tokenShow = true;
				}
				if (this.token) {
					uni.navigateTo({
						url: `/pages/productDetails/productDetails?id=${id}`
					});
				}

			},
			// 广告点击查看详情
			showSliderInfo(type) {
				console.log(type)
				console.log("type")
				let link = type.link;
				console.log(link)
				if (this.token == '') {
					this.tokenShow = true;
				}
				if (this.token&&link[1]>0) {
					if (link[0] == '1') { //活动
						console.log(link[0] + "link1")
						uni.navigateTo({
							url: `/pages/find/activityInfo?address=${link[1]}`
						})
					}
					if (link[0] == '2') { //推文
						console.log(link[0] + "link2")
						uni.navigateTo({
							url: `/pages/main/articleList/articleInfo?address=${link[1]}`
						})
					}


				}
			},
			dontLogin() {
				this.tokenShow = false
			},
			//授权
			getLogin() {
				var that = this;
				wx.login({
					//获取code 使用wx.login得到的登陆凭证，用于换取openid==token代替
					success(res) {
						if (res.code) {
							console.log(res.code);
							that.code = res.code;
							//使用 wx.getSetting 获取用户当前的授权状态。
							wx.getSetting({
								success(res) {
									if (res.authSetting['scope.userInfo']) { //已授权=>getUserInfo
										wx.getUserInfo({
											success(res) {
												console.log(res)
												console.log("ressss")
												console.log(that.userinfo)

												const formData = {
													code: that.code,
													avatar: res.userInfo.avatarUrl,
													nickname: res.userInfo.nickName
												}
												that.$http.post('/login/wxLogin', formData).then((response) => {
													const res = response.data;
													console.log(res.data.token);
													if (res.data.token) {
														that.$http.setConfig((config) => { /* 设置全局配置 */
															config.header = {
																...config.header,
																token: res.data.token,
															}
															return config
														})
														wx.setStorageSync("accessToken", res.data.token); //成功之后存入token
													}
													that.token = res.data.token;
													that.tokenShow = false;
													uni.showToast({
														title: res.msg,
														icon: 'none'
													});
												})
											},
											fail(err) {
												console.log(err)
											}
										})
									}
								}
							})
						} else {
							console.log("登录失败！" + res.errMsg);
						}
					}
				});
			},

		}
	}
</script>

<style scoped>
	/*  #ifdef H5  */
	.index>>>.uni-noticebar-icon {
		width: 27px;
		padding-left: 0;
	}

	/*  #endif  */
	.content {
		width: 100%;
		background: #fff;
		background-size: 100%;
	}

	.form-input {
		margin: 26px 4% 0 4%;
		box-shadow: none;
		border-radius: 16px;
		height: 32px;
		line-height: 32px;
	}

	.form-input .icon {
		padding-right: 10px;
	}

	.form-input .uni-input {
		height: 32px;
		line-height: 32px;
	}

	.swiper {
		margin: 15px 4% 0 4%;
		width: 92%;
		border-radius: 5px;
		overflow: hidden;
	}

	.swiper .img {
		height: 150px;
		width: 100%;
		border-radius: 5px;
	}

	.noticebar {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px 15px 14px 15px;
		font-size: 14px;
		background-color: #FAFAFA;
		height: 49px;
	}

	.uni-noticebar {
		background: #F3EDEC !important;
		padding: 0 2% 0 4%;
		height: 30px;
		border-radius: 15px;
	}

	/* nav */
	.nav {
		display: flex;
		padding: 10px 0 8px 0;
		color: #999999;
		border-top: solid 1px #F2F2F2;
		font-size: 12px;
		flex-wrap: wrap;
	}

	.nav-item {
		width: 25%;
		text-align: center;
		padding: 7px 0;
	}

	.nav-item .img {
		width: 55px;
		height: 55px;
	}

	.share {
		padding: 0 4%;
	}

	.share .img {
		width: 100%;
		height: 28vw;
	}

	.line {
		width: 100%;
		height: 10px;
		background: #f5f5f5;
	}

	.hot-title {
		padding: 10px 4%;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.hot-title .left {
		font-size: 16px;
		color: #020202;
		font-weight: bold;
	}

	.hot-title .right {
		display: flex;
		align-items: center;
		color: #6C6C6C;
		line-height: 26px;
		font-size: 12px;
	}

	/* list */
	.list {
		padding: 0 4%;
		display: flex;
		flex-direction: column;
	}

	.list-item {
		margin-bottom: 12px;
		display: flex;
		color: #333;
		position: relative;
	}

	.list-item .img {
		width: 110px;
		height: 110px;
		margin-right: 10px;
		border-radius: 5px;
	}

	.list-item .right {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.list-item .title {
		font-size: 15px;
		color: #191919;
		font-weight: bold;
		
	 display: -webkit-box;
	     -webkit-line-clamp:2;
	     overflow: hidden;
	     text-overflow: ellipsis;
	     -webkit-box-orient: vertical;
	}

	.list-item .short-title {
		color: #939393;
		font-size: 12px;
		padding-top: 8px;
		display: -webkit-box;
		    -webkit-line-clamp:1;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    -webkit-box-orient: vertical;
		
	}

	.list-item .pirce {
		margin-top: 5px;
		line-height: 30px;
		display: flex;
		color: #B6B6B6;
	}

	.list-item .pirce .now {
		display: flex;
		font-size: 18px;
		color: #FE4E00;
		font-weight: bold;
		margin-right: 6px;
	}

	/* .list-item .pirce .now .word{ font-size: 12px; } */
	.list-item .pirce .delet {
		color: #666;
		text-decoration: line-through;
	}

	.list-item .common-btn {
		position: absolute;
		right: 0;
		bottom: 20px;
		width: 88px;
		line-height: 30px;
		height: 30px;
	}

	/* uni-box */
	.uni-box .text {
		padding: 10px 0;
		text-align: center;
		font-size: 14px;
	}

	.uni-box .icon {
		position: absolute;
		bottom: -40px;
		left: 45%;
		font-size: 24px;
		color: #fff;
	}

	.uni-box .img {
		width: 100%;
		height: 180px;
	}

	/* 微信客服调用按钮 */
	.service-btn {
		background: none;
		line-height: 19px !important;
	}

	.service-btn::after {
		border: 0 !important;
	}

	.service-btn uni-image {
		width: 44px;
		height: 44px;
		margin-bottom: 4px;
	}

	.service-btn .text {
		font-size: 12px;
		color: #999999;
	}

	.activity {
		background-color: #fff;
		padding-bottom: 10px;
	}

	.activity-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 12px 13px;
		align-items: baseline;
		position: relative;
	}

	.activi-item {
		display: flex;
		flex-direction: row;
		width: 100%;
		overflow-y: scroll;
	}

	.activi-item-bg {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 28upx;
	}

	.activi-item-bg image {
		width: 212upx;
		height: 220upx;
		border-radius: 5px;
	}

	.activi-text {
		width: 200upx;
		text-align: center;
		padding: 7px 7px 0 7px;
		color: #191919;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 12px;
	}

	.vidio {
		width: -webkit-fill-available;
		height: 137px;
		margin: 0 16px;
		border-radius: 10px;
	}

	.activ-time {
		color: #6C6C6C;
		font-size: 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100px;
	}

	.text {
		color: #6C6C6C;
		font-size: 12px;
		margin-top: -6px;
	}

	.ac-au {
		position: absolute;
		width: 78px;
		height: 14px;
		background: rgba(253, 229, 191, 0.4);
		bottom: 12px;
	}

	.activi-item-bg:last-child {
		padding-right: 14px;
	}

	/*授权*/
	.dialog-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
	}

	.dialog-info {
		position: fixed;
		z-index: 5000;
		width: 80%;
		max-width: 600rpx;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		text-align: center;
		overflow: hidden;
	}

	.dialog-title {
		font-size: 36rpx;
		padding: 30rpx 30rpx 10rpx;
	}

	.dialog-content {
		padding: 10rpx 30rpx 20rpx;
		min-height: 80rpx;
		font-size: 32rpx;
		line-height: 1.3;
		word-wrap: break-word;
		word-break: break-all;
		color: #999999;
	}

	.dialog-footer {
		display: flex;
		align-items: center;
		position: relative;
		line-height: 90rpx;
		font-size: 34rpx;
	}

	.dialog-btn {
		display: block;
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		font-size: 16px;
	}

	button {
		background-color: #fff;
		border-radius: 0;
	}

	button::after {
		border-radius: 0;
	}

	.videoStyle {
		width: 100%;
		/*  padding-bottom:57.25%;
	   height: 0; */
	}

	/*弹框*/
	.huany {
		width: 290px;
		height: 340px;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.huan-text {
		position: absolute;
		top: 15px;
		font-size: 15px;
		font-weight: bold;
		color: #BD4140;
	}

	.hy-img {
		width: 100%;
		height: 100%;
	}

	.guanb-img {
		width: 34px;
		height: 34px;
		position: absolute;
		bottom: -50px;
	}

	/* 定义滚动条样式 */
	/* ::-webkit-scrollbar{width:14px;height: 10px;}
	::-webkit-scrollbar-track{background-color:#bee1eb;}
	::-webkit-scrollbar-thumb{background-color:#00aff0;}
	::-webkit-scrollbar-thumb:hover {background-color:#9c3}
	::-webkit-scrollbar-thumb:active {background-color:#00aff0} */
</style>
